<template>
    <div class="flex" style="position: relative;" :style="{marginTop:data1.offder_top}">
        <div v-if="data.list[0].status" class="offer_box " :style="{background:data1.offer_background,borderRadius:data1.offder_box,marginBottom:data1.offder_bottom}">
            <div class="flex">
                <div class="xs_tit" :style="'color:'+data.list[0].title_color">{{data.list[0].title}}</div>
                <img class="shijain" src="@/image/model/shijian.png"> 
            </div>
            <div class="flex">
                <div class="hd_hang_left_xiao" v-for="(item,index) in data1.shop_list" :key="index">
                    <img :src="item.img" :style="{borderRadius:data1.offder_right_radius
                    }"/>
                    <div class="xianjia" :style="{fontSize:data1.offer_size,color:data1.offer_color}">{{item.real_price}}</div>
                    <div class="yuanjia" :style="{fontSize:data1.original_size,color:data1.original_color}">{{item.show_price}}</div>
                </div>
            </div>
            
        </div>
        <div v-if="data.list[1].status" class="offer_box" :style="{background:data1.offer_background,borderRadius:data1.offder_box,marginBottom:data1.offder_bottom}">
            <div class="flex  ">
                <div class="xs_tit" :style="'color:'+data.list[1].title_color">{{data.list[1].title}}</div>
                <div class="nc_txt" :style="{borderColor:data.list[1].button_color,color:data.list[1].button_color}">
                    <span>火爆团购</span>
                    <i class="el-icon-arrow-right"/>
                </div>
                <div class="fubiaoti" :style="{color:data.list[1].subtitle_color}">
                    {{data.list[1].subtitle}}
                </div>
            </div>
            <div class="flex">
                <div class="hd_two" v-for="(item,index) in data1.shop_list.slice(1,3)" :key="index">
                    <img :src="item.img" :style="{borderRadius:data1.offder_right_radius
                    }"/>
                   
                </div>
            </div>
            
        </div>
        <div v-if="data.list[2].status" class="offer_box" :style="{background:data1.offer_background,borderRadius:data1.offder_box,marginBottom:data1.offder_bottom}">
            <div class="flex  ">
                <div class="xs_tit" :style="'color:'+data.list[2].title_color">{{data.list[2].title}}</div>
                <div class="nc_txt" :style="{borderColor:data.list[2].button_color,color:data.list[2].button_color}">
                    <span>商城新品</span>
                     <i class="el-icon-arrow-right"/>
                </div>
                <div class="fubiaoti" :style="{color:data.list[2].subtitle_color}">
                    {{data.list[2].subtitle}}
                </div>
            </div>
            <div class="flex">
                <div class="hd_two" v-for="(item,index) in data1.shop_list.slice(1,3)" :key="index">
                    <img :src="item.img" :style="{borderRadius:data1.offder_right_radius
                    }"/>
                   
                </div>
            </div>
            
        </div>
        <div v-if="data.list[3].status" class="offer_box" :style="{background:data1.offer_background,borderRadius:data1.offder_box,marginBottom:data1.offder_bottom}">
            <div class="flex  ">
                <div class="xs_tit" :style="'color:'+data.list[3].title_color">{{data.list[3].title}}</div>
                <div class="nc_txt" :style="{borderColor:data.list[3].button_color,color:data.list[3].button_color}">
                    <span>特价专区</span>
                     <i class="el-icon-arrow-right"/>
                </div>
            </div>
            <div class="flex">
                <div class="hd_hang_left_xiao" v-for="(item,index) in data1.shop_list" :key="index">
                    <img :src="item.img" :style="{borderRadius:data1.offder_right_radius}"/>
                    <div class="xianjia" :style="{fontSize:data1.offer_size,color:data1.offer_color}">{{item.real_price}}</div>
                    <div class="yuanjia" :style="{fontSize:data1.original_size,color:data1.original_color}">{{item.show_price}}</div>
                </div>
            </div>
            
        </div>
        
    </div>
</template>

<script>
    export default {
        props:['data'],
        name: 'ItemOffer',
        data(){
            return{
                data1:{ 
                    offer_background:'#fff',//头部背景颜色
                    color:'#fff',//标题文字颜色
                    original_size:'12px',//标题文字大小
                    original_color:'#999',
                    offer_color:'#333',
                    offer_size:'12px',
                    offder_top:'0px',
                    offder_padding:'0px',
                    offder_box:'5px',
                    offder_right_radius:'5px',
                    offder_bottom:'5px',
                    pink:'#f84ab3',
                    green:'#19c960',
                    blue:'#4ab9f8',
                    red:'#ff0000',
                    orange:'#ffba19',
              
                    shop_list:[
                        {img:require("@/image/model/shangpin.jpg"),real_price:'￥12.00',show_price:'￥15.00'},
                        {img:require("@/image/model/shangpin.jpg"),real_price:'￥12.00',show_price:'￥15.00'},
                        {img:require("@/image/model/shangpin.jpg"),real_price:'￥12.00',show_price:'￥15.00'},
                    ]
                }
            }
        }
     
	
    }
</script>

<style lang="scss" scoped>

.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.offer_box{
    width: 49.5%;
    height: 105px;
}
.hd_two{
    width: 50%;
    text-align: center;
    margin-top: 5px;
}
.hd_two_dan{
    width: 50%;
    text-align: center;
    margin-top: 5px;
}

.hd_three{
    width: 33.3%;
    text-align: center;
    margin-top: 5px;
}
.hd_hang_left_xiao{
    width: 33.3%;
    text-align: center;
    margin-top: 5px;
    
}
.hd_two img{
    width: 50px;
    height: 50px;
}
.hd_three img{
    width: 40px;
    height: 70px;
}
.hd_two_dan img{
    width: 60px;
   height: 70px; 
}
.hd_hang_left_xiao img{
    width: 34px;
    height: 34px;
}
.yuanjia{
    text-decoration:line-through;
}
.shijain{
    width: 47%;
    margin-left: 5px;
    margin-top: 8px;
    height: 15px;
}
.xs_tit{
    padding-left: 10px;
    padding-top: 5px;
}
.nc_txt{
    border-radius: 100px;
    border: 1px solid;
    margin-left: 3px;
    font-size: 10px;
    padding: 0 3px;
    height: 20px;
    margin-top: 5px;
    margin-right: 5px;
}
.nc_txt i{
    margin-left: 5px;
}
.fubiaoti{
    font-size: 12px;
    padding-left: 10px;
}
</style>
